﻿<template>
    <el-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1200"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-row style="margin-top: 18px;">
                <el-col :span="8">
                    <el-form-item label-width="120px" label="单据状态:">{{entityObj.statusDesc}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="物料发货状态:">{{entityObj.sendStatusDesc}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="接单金额:">{{entityObj.totalAmount}} 元</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="配送订单编号:"
                    >{{entityObj.deliveryOrderCode}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="采购单位:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.purchaseUnityRealName}}
                                <br />
                                联系电话:{{entityObj.purchaseUnityMobile}}
                                <br />
                            </template>
                            <span style="color: blue;">{{entityObj.purchaseUnityName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货单位:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.realName}}
                                <br />
                                联系电话:{{entityObj.mobile}}
                                <br />
                                收货地址:{{entityObj.address}}
                            </template>
                            <span style="color: blue;">{{entityObj.storeName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="关联要货申请:">{{entityObj.applyOrderCode}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货时间:">{{entityObj.purchaseDate}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="期望到货日期:">{{entityObj.expectedDate}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="下单人:">{{entityObj.createName}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="下单时间:">{{entityObj.createTime}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="最后修改人:">{{entityObj.updateName}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="最后修改时间:">{{entityObj.updateTime}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="备注:">{{entityObj.remarks}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="应发货清单:">
                        <el-table :data="entityObj.sendOrderItems" border style="width: 100%">
                            <el-table-column label="物料编码" width="130" prop="materialCode"></el-table-column>
                            <el-table-column label="物料名称" width="130" prop="materialName"></el-table-column>
                            <el-table-column label="规格" width="130" prop="materialSpecs"></el-table-column>
                            <el-table-column label="物料类别" width="130" prop="materialTypeName"></el-table-column>
                            <el-table-column label="单位" width="100" prop="unitName"></el-table-column>
                            <el-table-column label="配送单价" width="120" prop="price"></el-table-column>
                            <el-table-column label="数量" width="120" prop="qty"></el-table-column>
                            <el-table-column label="金额" width="120" prop="totalAmount"></el-table-column>
                            <el-table-column label="出仓类型" width="160" prop="warehouseTypeDesc"></el-table-column>
                            <el-table-column label="备注" width="160" prop="remarks"></el-table-column>
                            <el-table-column label="累计发货数量" width="160" prop="sendQty"></el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>-->

        <!-- <template>
            <el-dialog v-model="materialState" title="选择商品" :width="1000" :center="true" append-to-body
                style="height: 480px">
                <el-row>
                    <sc-material-choice ref="scMaterialChoice"></sc-material-choice>
                </el-row>
                <template #footer>
                    <el-button @click="materialState = false">取 消</el-button>
                    <el-button type="primary" :loading="isSaveing" @click="setMaterialChoice">确定</el-button>
                </template>
            </el-dialog>
        </template>-->
    </el-dialog>
</template>



<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {},
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
            itemsData: [],
        };
    },
    computed: {
    },
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单注入数据
        async setData(data) {
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    "delivery-order/items/" + data.deliveryOrderId,
                    {}
                );
                if (returnValue.status == 200) {
                    this.entityObj = {...data, sendOrderItems:[...returnValue.response] };
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        async supplierSelectProcess(rowData) {
            this.entityObj.supplier = {};
            if (rowData) {
                this.entityObj.supplier = {
                    supplierId: rowData.supplierId,
                    supplierName: rowData.supplierName,
                };
            }
            console.log(this.entityObj.supplier);
        },
        addMaterial() {
            this.materialState = true;
        },
        deleteRow(index) {
            this.entityObj.purchaseProtocolItems.splice(index, 1);
        },
        handleSearch() {
            this.itemsData = this.entityObj.purchaseProtocolItems;
            if (
                this.queryList.materialTypeIds &&
                this.queryList.materialTypeIds.length > 0
            ) {
                this.itemsData = this.itemsData.filter((item) => {
                    return this.queryList.materialTypeIds.includes(
                        item.materialTypeId
                    );
                });
            }

            if (this.queryList.materialCode) {
                this.itemsData = this.itemsData.filter((item) => {
                    return item.materialCode.includes(
                        this.queryList.materialCode
                    );
                });
            }

            if (this.queryList.materialName) {
                this.itemsData = this.itemsData.filter((item) => {
                    return item.materialName.includes(
                        this.queryList.materialName
                    );
                });
            }
            console.log(this.entityObj.purchaseProtocolItems);
        },
        setMaterialChoice() {
            let materials = this.$refs.scMaterialChoice.selectionRows;
            materials.map((p) => {
                this.entityObj.purchaseProtocolItems.push({
                    materialId: p.materialId,
                    materialCode: p.materialCode,
                    materialName: p.materialName,
                    materialSpecs: p.materialSpecs,
                    materialTypeId: p.materialTypeId,
                    materialTypeName: p.materialTypeName,
                    unitCode: "",
                    unitName: "",
                    price: 0.0,
                    remarks: "",
                    materialItemId: null,
                    materialItems: p.materialItems,
                });
            });
            this.materialState = false;
            this.queryList = {};
            this.handleSearch();
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");
            const hours = String(date.getHours()).padStart(2, "0");
            const minutes = String(date.getMinutes()).padStart(2, "0");
            const seconds = String(date.getSeconds()).padStart(2, "0");

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
    },
    async mounted() {
        this.entityObj.purchaseUnityName = tool.data.get("USER_INFO").OrgName;
        this.entityObj.crName = tool.data.get("USER_INFO").Name;
        this.entityObj.crDate = this.formatDate(new Date());
        await this.initOptions();
    },
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 8px !important;
}
</style>
